
<template>
  <el-card>
    <div class="cn">
      {{this.$session.get("coursename")}}
    </div>
    <div style="float:right">
      <el-button type="danger" @click="ret" round icon="el-icon-refresh-right" plain>返回</el-button>
    </div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>指标管理</el-breadcrumb-item>
      <el-breadcrumb-item>指标支撑度管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="searchForm">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="queryInfo.query" placeholder="请输入指标编号" clearable @clear="getAllCourseIndicatorSupportList"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="" @click="getAllCourseIndicatorSupportList" icon="el-icon-search">查询</el-button>
        </el-form-item>
        <el-button style="position: absolute; right: 720px" type="" @click="addDialogVisible=true">添加二级指标</el-button>
      </el-form>



      <el-dialog title="添加指标" :visible.sync="addDialogVisible" width="40%" @close="addDialogClose">
        <el-form :model="addForm" ref="addFormRef" label-width="100px">
          <el-form-item label="课程名称" prop="cname">{{this.$session.get('coursename')}}
            <el-input v-model="addForm.cname" v-show="false" readonly="readonly"></el-input>
          </el-form-item>
          <el-form-item label="对应指标名称" prop="sindicname">
            <el-select v-model="addForm.sindicname" placeholder="请选择" @focus="getSid()" @change="getSindicname()" clearable>
              <el-option v-for="item in SidList" :key="item.sindicname" :label="item.sindicname" :value="item.sindicname">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="指标支撑度" prop="supports">
            <el-select v-model="addForm.supports" placeholder="请选择">
              <el-option label="H" value="H"></el-option>
              <el-option label="M" value="M"></el-option>
              <el-option label="L" value="L"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click=" addCourseIndicatorSupport">确 认</el-button>
        </div>
      </el-dialog>
    </div>
    <el-table :header-cell-style="{background:'#808080',color:'#FFFFFF'}" border stripe :data="List" style="width: 100%">
      <el-table-column prop="sid" label="指标编号" width="180" align="center">
      </el-table-column>
      <el-table-column prop="sindicname" label="指标名称" width="180" align="center">
      </el-table-column>
      <el-table-column prop="supports" label="指标支撑度" width="180" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="删除指标" placement="top-start">
            <el-button type="" icon="el-icon-delete" circle @click="deleteCourseIndicatorSupport(scope.row.sid)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[4]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </el-card>
</template>


<script>
export default {
  name: 'addUser',
  created(){
    this.getAllCourseIndicatorSupportList();

  },
  data() {
    return {
      queryInfo:{
        role:this.$session.get("coursename"),
        query:'',//查询信息
        pageNum:1,
        pageSize:4
      },
      queryInfo1:{
        query:'',//查询信息
        role:'',
        pageNum:1,
        pageSize:50
      },
      List:[],
      SidList:[],
      total:0,
      addDialogVisible:false,
      addForm:{
        cname:this.$session.get("coursename"),
        sid:'',
        sindicname:'',
        supports:''
      },

    }
  },
  methods: {
    async getAllCourseIndicatorSupportList () {
      const { data: res } = await this.$http.get("CourseIndicatorSupports/AllCourseIndicatorSupport", { params: this.queryInfo })
      this.List = res.data;
      this.total = res.numbers;
    },
    async getSid(){
      const { data: res } = await this.$http.get("ProfesIndicatorTwos/AllProfesIndicatorTwo" ,{ params: this.queryInfo1 });
      this.SidList = res.data;
    },
    getSindicname(){
      for(var i = 0;i < this.SidList.length;i++){
        if(this.SidList[i].sindicname == this.addForm.sindicname){
          this.addForm.sid = this.SidList[i].sid;
          break;
        }
      }
    },
    async deleteCourseIndicatorSupport (sid) {
      const confirmResult = await this.$confirm('是否永久删除该指标？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return ;
      }
      const { data: res } = await this.$http.delete("CourseIndicatorSupports/CourseIndicatorSupport?sid=" + sid);
      if (res !== "success") {
        return this.$message.error("删除失败");
      }
      this.$message.success("删除成功");
      this.getAllCourseIndicatorSupportList();
    },
    handleSizeChange (newSize) {
      this.queryInfo.pageSize = newSize;
      this.getAllCourseIndicatorSupportList();
    },
    handleCurrentChange (newPage) {
      this.queryInfo.pageNum = newPage;
      this.getAllCourseIndicatorSupportList();
    },
    addDialogClose () {
      this.$refs.addFormRef.resetFields();
    },
    editDialogClose () {
      this.$refs.editFormRef.resetFields();
    },
    ret(){
      this.$router.push({ path: "/manage_indicator"});
    },
    addCourseIndicatorSupport () {
      for(var i = 0;i < this.List.length;i++){
        if(this.addForm.sindicname == this.List[i].sindicname){
          return this.$message.error("请不要添加已有的指标对应支撑度!")
        }
      }
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return;
        const { data: res } = await this.$http.post("CourseIndicatorSupports/CourseIndicatorSupport", this.addForm);
        if (res !== "success") {
          return this.$message.error("添加失败!")
        }
        this.$message.success("添加成功！")
        this.addDialogVisible = false;
        this.getAllCourseIndicatorSupportList();
      })
    },
  }
}
</script>

<style scoped>
.searchForm{
  margin-top: 40px;
}
.cn{
  font-size: 35px;
  text-align: center;
  color: transparent;
  background-color : black;
  text-shadow : rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;
  -webkit-background-clip : text;
}
</style>
